<template>
    <div class="content">
      <alertTip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alertTip>
      <div class="goods">
        <div class="goods-top">
          <div class="img">
            <img :src=this.$route.params.mallImg||goodsInfo.mallImg alt="">
          </div>
          <div class="text">
            <p>{{this.$route.params.mallName || goodsInfo.mallName}}</p>
            <p>已选择:{{this.$route.params.specName || goodsInfo.specName}}</p>
            <p>&yen{{this.$route.params.price/100 || goodsInfo.price/100}}</p>
          </div>
        </div>
        <div class="num">
          <p>数量</p>
          <div class="numbers">
            <img class="sub" src="./_@1x.png" alt="" v-on:click="sub">
            <div class="number" v-model="isNum">{{isNum}}</div>
            <img class="add" src="./+@1x.png" alt="" v-on:click="add">
          </div>
        </div>
        <div class="freight">
          <div>
            <span>运费</span>
            <b>包邮</b>
          </div>
        </div>
        <div class="subTotal">
          <div>
            <span>共计 {{isNum}} 件商品</span>
            <span>小计: &yen <span class="price">{{(this.$route.params.price/100 || goodsInfo.price/100) * isNum || 0 }}</span></span>
          </div>
        </div>
      </div>
      <footer>
        <div class="foot">
          <div>实际支付：&yen{{(this.$route.params.price/100 || goodsInfo.price/100) * isNum || 0 }}</div>
          <a :href=href>确认支付</a>
        </div>
      </footer>
    </div>
</template>

<script>
  /* eslint-disable semi */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  export default {
    name: 'FXExchange',
    data () {
      return {
        isNum: this.$route.params.isNum || 1,
        show: true,
        userInfo:{},
        addr: {},
        type: '',
        href:"",
        showAlert:false,
        alertText:null
      }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      sub () {
        this.isNum--;
        if (this.isNum <= 0) {
          this.alertTip('数值不可以小于0');
          this.isNum = 0;
        }
      },
      add () {
        this.isNum++;
      },
    },
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
      this.goodsInfo =JSON.parse(localStorage.getItem('goodsInfo'))
      this.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=${window.localStorage.mallId}&money=${this.goodsInfo.price*this.isNum}&payType=4&mallSpecificationsId=${this.goodsInfo.spec}&buyNumber=${this.isNum}&shopId=${window.localStorage.shopId}`
      console.log(this.userInfo)
    },
    updated(){
      this.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=${window.localStorage.mallId}&money=${this.goodsInfo.price*this.isNum}&payType=4&mallSpecificationsId=${this.goodsInfo.spec}&buyNumber=${this.isNum}&shopId=${window.localStorage.shopId}`
      console.log(this.href)
    }
  }
</script>

<style lang="scss" scoped>
  .content{
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    .goods{
      background: #ffffff;
      .goods-top{
        box-sizing: border-box;
        height: 224px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        padding:33px 30px 0px 30px;
        .img{
          width: 146px;
          height: 146px;
          background: #009dda;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .text{
          flex: 1;
          padding-left: 20px;
          font-size: 28px;
          p:nth-child(1){
            color: #3b3b43;
            line-height: 40px;
            overflow: hidden;
            text-overflow:ellipsis;
          }
          p:nth-child(2){
            font-size: 24px;
            color: #a1a1a1;
            padding:10px 0 14px;
          }
          p:nth-child(3){
            color: #fd4c2e;
          }
        }
      }
      .num{
        height: 110px;
        border-top:1px solid #f4f4f4 ;
        border-bottom:1px solid #f4f4f4 ;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        padding-left: 34px;
        padding-right: 19px;
        p{
          font-size: 28px;
          color: #3b3b43;
          line-height: 112px;
        }
        .numbers{
          margin-top: 25px;
          display: flex;
          line-height: 112px;
          flex-flow: row nowrap;
          justify-content: flex-start;
          img{
            width: 68px;
            height: 60px;
          }
          .number{
            width: 160px;
            height: 64px;
            font-size: 20px;
            background: url("./btn@1x.png") no-repeat;
            background-size: 100%;
            text-align: center;
            line-height: 62px;
          }
        }
      }
      .freight{
        div{
          height: 92px;
          line-height: 92px;
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          padding-left: 32px;
          padding-right: 30px;
          span{
            font-size: 28px;
            color: #3b3b43;
          }
          b{
            font-weight: 400;
            font-size: 28px;
            color: #a1a1a1;
          }
        }
      }
      .subTotal{
        height: 92px;
        line-height: 92px;
        border-bottom: 1px solid #f4f4f4;
        div{
          float: right;
          margin-right: 30px;
          span{
            font-size: 28px;
            color: #3b3b43;
            margin-left: 30px;
            &.price{
              margin-left: 0;
              color: #fd4c2e;
            }
          }
        }
      }
    }
    footer{
      text-align: center;
      height: 100px;
      line-height: 100px;
      font-size: 28px;
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #ffffff;
      .foot{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        height: 100px;
        div:nth-child(1){
          flex: 1.5;
          color: #fd4c2e;
        }
        a{
          flex: 1;
          width: 288px;
          color: #ffffff;
          background: url("./btn_pay@1x.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
